<template>
  <div class="game-group-of-jie-mi-you-xi_card">
    <div class="game-group-of-jie-mi-you-xi_card_logo" id="game-group-of-jie-mi-you-xi_card_logo"></div>
    <p class="game-group-of-jie-mi-you-xi_card_name" id="game-group-of-jie-mi-you-xi_card_name">{{ gameName }}</p>
  </div>
</template>

<script>
export default {
  name: "gameCard",

  props:{
    gameLogoSrc:{
      type:String,
      required:true,
    },
    gameName:{
      type:String,
      required: true,
    },

  },

  mounted() {
    document.getElementById("game-group-of-jie-mi-you-xi_card_logo").style.backgroundImage="url('" + this.$props.gameLogoSrc + "')";
  }
}
</script>

<style scoped>

.game-group-of-jie-mi-you-xi_card_name{
  width: 340px;
  font-size: 18px;
  margin-top: 50px;
}

.game-group-of-jie-mi-you-xi_card_logo{
  width: 200px;
  height: 200px;
  border-radius: 3px;
  overflow: clip;
  background-color: rgb(230,230,230);
  margin-top: 50px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.game-group-of-jie-mi-you-xi_card{
  width: 340px;
  height: 400px;
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-right: 30px;
  display: inline-block;
  transition: all 0.5s;
  margin-bottom: 50px;
}

</style>